<script setup lang="ts">
import { onMounted } from 'vue';
import { navigateTo } from '@tarojs/taro';
import { state } from './state';
import { APP_KNOWLEDGE_TYPE_TREE_LIST_QUERY } from '/@/api/modules/base/knowledge-type';
/**
 * 点击最左边类型的回调函数
 * @param index 选中的索引
 */
function changeText(index: number) {
  state.categoryChild = [].concat(state.category[index].children as any);
}

/**
 * 点击子类型跳转到对应的文章列表页面
 */
function onChange(item: KnowledgeBaseType.ChildCateListDto) {
  navigateTo({ url: '/pages/knowledge/list/index?id=' + item.catId });
}

/**
 * @description 消息列表查询
 * @param {Number} page -当前页
 * @param {Number} pageSize -每页条数
 */
function queryList(page: number = 1, pageSize: number = 1000) {
  APP_KNOWLEDGE_TYPE_TREE_LIST_QUERY({
    comQuery: { page, pageSize },
    knowledgeBaseTypeDto: {},
  }).then((res) => {
    if (!res.knowledgeBaseTypeDto) return;

    state.category = res.knowledgeBaseTypeDto.map((item) => {
      return {
        catId: item.id,
        catName: item.baseTypeLabel,
        catType: 1,
        children:
          item.children && item.children.length
            ? item.children.map((childItem) => {
                return {
                  catId: childItem.id,
                  catName: childItem.baseTypeLabel,
                  catLevel: 2,
                  catType: 1,
                  childCateList:
                    childItem.children && childItem.children.length
                      ? childItem.children.map((childCategoryItem) => {
                          return {
                            catId: childCategoryItem.id,
                            catName: childCategoryItem.baseTypeLabel,
                            showPic: true,
                            showVideo: false,
                          };
                        })
                      : [],
                };
              })
            : [],
      };
    });

    changeText(0);
  });
}
onMounted(() => {
  queryList();
});
</script>
<template>
  <view class="knowledge-type app-page--1">
    <app-navbar title="知识库分类" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="knowledge-type__wrapper">
        <nut-category :category="state.category" @change="changeText">
          <nut-category-pane
            class="knowledge-type__category-pane"
            type="text"
            :categoryChild="state.categoryChild"
            @onChange="onChange"
          >
          </nut-category-pane
        ></nut-category>
      </view>
    </scroll-view>
  </view>
</template>
<style lang="scss">
@import './index.scss';
</style>
